<template>
  <div class="activityTrack-container">
    <div
      class="body"
      @click="jumpDetail(item,'')"
    >
      <div class="top">
        <div class="left">
          <Avatar size="normal" :avatar="item.avatarUrl"> 
            <MessageTips slot="extra" :news="item.unreadDynamicCount" />
          </Avatar>
          <div class="content">
            <div class='name'>
              <div class='name-show ellipsis'>{{item.clientName}}</div>
              <span class="aw-tag">
                <span v-if="item.clientStrangerFlag !== 2">访客</span>
                <span class="active" v-else>意向客户</span>
              </span>
              <!-- <van-tag v-if="item.clientStrangerFlag !== 2"
                color="rgb(156, 165, 181, 0.15)"
                text-color="#40516F"
                >访客</van-tag>
              <van-tag v-else
                color="rgb(0, 122, 230, 0.15)"
                text-color="#007AE6"
                >意向客户</van-tag> -->
            </div>
            <p>
              <span>{{ sourceText[item.sourceType] || '来自系统分配'}}</span> |
              <span>{{ item.updateTimeStr || (item.updateTime | dateTimeFormatter('','/')) }}</span>
            </p>
          </div>
        </div>
        <div class="right" @click.stop="contact(item)">
          <p class="iconfont icon-kehu_xiaoxi"></p>
          <p class='txt'>发消息</p>
        </div>
      </div>
      <div class="bottom">
        <p v-html="showText"></p>
      </div>
    </div>
  </div>
</template>
<script>
import Avatar from '@/components/Avatar'
import MessageTips from '@/components/MessageTips'
const regTxt = /全景图|周边配套设施|开盘通知提醒|降价提醒|预约看房|优惠资讯|楼盘详情|优惠卡券/g
export default {
  props: {
    item: {
      type: Object
    },
    type: {
      type: Number,
      default: 0
    },
    index: {
      type: Number
    }
  },
  components: {
    Avatar,
    MessageTips
  },
  computed: {
    showText() {
      let str = this.item.markedWords
      if (!str) return
      // var regex = /{{(.+?)}}/g
      str = str.replace(/{{(.+?)}}/, '' )
      str = str.replace(/{{/g, '<span class="name-bold">')
      str = str.replace(/}}/g, '</span>')
      // let matchArray = str.match(regex)
      // console.log(matchArray)
      // matchArray[0] = ''
      // if (matchArray[1]) {
      //   let name = matchArray[1].slice(2, matchArray[1].length - 2)
      //   matchArray[1] = `<span class="name-bold">${ name }</span>`
      // } 
      // matchArray.forEach(item => {
      //   str = str.replace(/{{(.+?)}}/, item )
      // })
      // console.log(str)
      return str
    }
  },
  data() {
    return {
      sourceText: {
        1 : '来自名片分享',
        2 : '来自楼盘分享',
        3 : '来自文章分享'
      }
    }
    
  },
  created () { },
  methods: {
    /**
     * 匹配文字高亮显示
     */
    showTxt (str) {
      let result = str.match(regTxt)
      return result ? result[0] : ''
    },

    /**
     * 跳转到客户详情
     */
    jumpDetail (item) {
      let query = {}
      if (item.clientStrangerFlag !== 2) {
        query = { thread: 'thread', type: this.type, unreadDynamicCount: item.unreadDynamicCount }
      } else {
        query = { activityTrack: 'activityTrack', type: this.type, unreadDynamicCount: item.unreadDynamicCount }
      }
      this.$router.push({ path: `/custom/${item.clientId}`, query })
    },

    /**
     * 联系
     */
    contact (item) {
      this.$router.push({
        name: "message",
        query: {
          clientId: item.clientId
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.activityTrack-container {
  background: #fff;
  box-sizing: border-box;
  font-size: 12px;
  // font-family: PingFangSC;
  font-weight: 400;
  color: rgba(156, 165, 181, 1);
  margin-top: 12px;
  .body {
    color: rgba(156, 165, 181, 1);
    padding: 16px 21px 16px 16px;
    box-shadow: inset 0px -1px 1px -1px #e4e6f0;
    .top {
      display: flex;
      justify-content: space-between;
      position: relative;
      .left {
        display: flex;
        .content {
          margin-left: 12px;
        }
        .name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          height: 26px;
          line-height: 26px;
          .name-show {
            max-width: 145px;
            margin-right: 4px;
          }
          .van-tag {
            transform: scale(0.8);
            opacity: 0.8;
            font-family: PingFangSC-Semibold;
          }
        }
        p {
          height: 20px;
          line-height: 20px;
          margin-top: 2px;
          font-weight: 500;
          color: rgba(156, 165, 181, 1);
        }
      }
      .right {
        color: #007AE6;
        text-align: center;
        .txt {
          line-height: 20px;
        }
      }
    }
    .bottom {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 400;
      color: #9ca5b5;
      line-height: 20px;
      /deep/ .name-bold {
        padding: 0 5px;
        color: #13284D;
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
}
.aw-tag {
  font-size: 10PX;
  line-height: normal;
  display: inline-table;
  vertical-align: middle;
  span {
    font-weight: normal;
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
    border-radius: 2px;
    background: rgba(156, 165, 181, 0.15);
    color: #40516f;
    font-family: 'Microsoft YaHei', 'PingFangSC-Regular';
    &.active {
      color: #007ae6;
      background: rgba(0, 122, 230, 0.15);
    }
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
